import React, { useCallback, useEffect, useState } from "react";
import Style from "./index.module.less";

const color = "#f7f8fc";
const border = "1px solid #0068FF";
const noneBorder = "1px solid " + color;
// PrefixPlaceholder
export const PrefixPlaceholder = ({
	value: parentValue, //无效
	onChange: parentOnChange,
	placeholder: parentPlaceholder,
	prefix: parentPrefix,
	children,
	...props
}) => {
	const {
		placeholder: childPlaceholder,
		prefix: childPrefix,
		value: childValue,
		onChange: childOnChange,
		origin, // 不改变，返回原来的组件
		...childProps
	} = children.props;

	if (origin) return children;
	// prefix文字
	const TextTemple = childPrefix || parentPrefix || childPlaceholder || parentPlaceholder;

	// 快捷格式化Placeholder转为prefix文字
	const format = text => {
		if (typeof text !== "string") return text;
		if (text.startsWith("请输入")) text = text.replace("请输入", "");
		if (text.startsWith("输入")) text = text.replace("输入", "");
		if (text.startsWith("请选择")) text = text.replace("请选择", "");
		if (text.startsWith("选择")) text = text.replace("选择", "");
		if (text.startsWith("多个") && text.endsWith("，以逗号隔开")) {
			text = text.replace("多个", "");
			text = text.replace("，以逗号隔开", "");
		}
		return text;
	};
	// Prefix统一转为组件
	const Prefix = useCallback(() => {
		if (typeof TextTemple == "string") return format(TextTemple);
		if (typeof TextTemple == "function") return TextTemple();
		if (typeof TextTemple == "object") return TextTemple;
		return <></>;
	}, [TextTemple, childValue]);

	// 判断当前children ( Select组件 )，是否选中
	const [isSelected, setIsSelected] = useState(childValue);
	const isChildHasOnChange = Object.prototype.hasOwnProperty.call(children.props, "onChange");
	const onChange = (value, option) => {
		if (option !== undefined) {
			if (typeof value === "object") {
				setIsSelected(option?.length > 0);
			} else {
				setIsSelected(true);
			}
		} else {
			setIsSelected(false);
		}
		if (isChildHasOnChange) {
			childOnChange(value, option);
		} else {
			parentOnChange(value, option);
		}
	};

	// 判断是否必填
	const isRequired = props.required || children.props.required;
	// 必填时，如果当前为空值，显示红色星号
	const nullValue = isRequired ? <span className="red">*</span> : null;
	// 输入框时，显示必填星号
	const inputNullValue = isRequired ? <span className="red">*</span> : <span />;

	// 显示前缀
	const [prefixProps, setPrefixProps] = useState({});
	const isChildHasOptions = Object.prototype.hasOwnProperty.call(children.props, "options") || children.props?.children;
	useEffect(() => {
		// 以此判断为 Select组件
		if (isChildHasOptions) {
			const fontSize = 12;
			const textWidth = isSelected ? format(TextTemple).length * fontSize + fontSize : fontSize / 2;
			const dataContent = isSelected ? TextTemple : nullValue;
			const style = {
				"--prefix-select-padding-left": textWidth + "px",
				"--prefix-select-font-size": fontSize + "px",
				...(childProps.style || {})
			};

			const classNameList = [Style.prefix_select, childProps.className || ""];
			if (isSelected && !props.isShowBoxShadow) {
				classNameList.push(Style.background_white_select);
			}

			setPrefixProps({
				"data-content": format(dataContent),
				style,
				className: classNameList.join(" ")
			});
		} else {
			const realValue = childValue && TextTemple;
			const styleFlag = ![null, undefined, ""].includes(realValue);
			const classNameList = [Style.prefix_input, childProps.className || ""];
			if (styleFlag) {
				classNameList.push(Style.background_white_input_value);
			} else {
				classNameList.push(Style.background_white_input);
			}

			setPrefixProps({
				prefix: styleFlag ? <Prefix /> : inputNullValue,
				className: classNameList.join(" ")
			});
		}
	}, [childValue, isChildHasOptions, isSelected, TextTemple, Prefix, props.required]);

	const cloneChildren = React.cloneElement(children, {
		value: childValue,
		onChange: onChange,
		placeholder: childPlaceholder || parentPlaceholder,
		autoComplete: "off",
		...props,
		...childProps,
		...prefixProps
	});

	return cloneChildren;
};
